<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>

<body>
    <!--题目要求: 在box元素中动态创建无序列表，自定义列表项内容。 -->
    <div id="box">
        <h1>动态创建列表项</h1>
    </div>
    <script src="common.js"></script>
    <script>
        // 获取元素
        var box = my$('box');
        // 创建数组
        var movie = ['星际穿越', '千与千寻', '复仇者联盟', '我和我的祖国', '少年的你'];
        // 创建ul元素
        var ul = document.createElement('ul');
        // 将ul添加到box中去
        box.appendChild(ul);

        // 根据数组项往ul中添加数据
        for (var i = 0; i < movie.length; i++) {
            // 每次都要生成一个li元素
            var li = document.createElement('li');
            // 将li元素添加到ul内部
            ul.appendChild(li);
            // 给每个li标签添加内容
            li.innerText = movie[i]
        }
    </script>
</body>

</html>